<template>
  <el-carousel height="300px" trigger="click" class="container">
    <el-carousel-item v-for="(item, index) in images" :key="index">
      <img :src="item.src" class="carousel-image" alt="轮播图图片加载中" />
      <div class="caption-box">
        <p>{{ item.message }}</p>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>
<script setup>
import { ref } from "vue";

// 存取轮播图的图片数组
const images = ref([
  { src: require("@/assets/images/1.jpg"), message: "说明文字一" },
  { src: require("@/assets/images/2.jpg"), message: "说明文字二" },
  { src: require("@/assets/images/3.jpg"), message: "说明文字三" },
  { src: require("@/assets/images/4.jpg"), message: "说明文字四" },
]);
</script>
<style scoped>
.el-carousel {
  margin-top: 10px;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.carousel-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.caption-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5rem;
  background-color: rgba(43, 57, 118, 0.5);
  color: white;
  text-align: left;
  text-indent: 2em;
  font-size: 1rem;
}
@media (max-width: 768px) {
  .caption-box {
    position: absolute;

    left: 0;
    width: 100%;
    background-color: rgba(43, 57, 118);
    color: white;
    text-align: left;
    text-indent: 1em;
    font-size: 1rem;
  }
}
</style>